<template>
	<view>
		<view class="background"></view>
		<view class="body">
			<view class="title">
				<input 
					class="input" 
					type="text" 
					v-model="searchText"
					placeholder="请输入要搜索的内容（维修单号、车牌号等）" 
					@confirm="loadOrders"
				/>
				<image 
					class="search" 
					src="/static/search.png" 
					mode=""
					@click="loadOrders"
				></image>
			</view>
			<view class="tag">
				<view class="">
					共{{total}}条
				</view>
				<view class="">
					状态
					<view class="select" @click="openStatusOptions">
						<view>
							<input class="selectItem" disabled type="text" :value="statusOption"/>
						</view>
						<view :class="isStatusOptions?'arrow1':'arrow'"></view>
					</view>
					<view class="options" v-if="isStatusOptions">
						<view @click="getStatusOption(item)" v-for="(item,index) in statusOptions" :key="index">
							{{item.text}}
						</view>
					</view>
				</view>
				<view class="">
					维修方式
					<view class="select" @click="openModeOptions">
						<view>
							<input class="selectItem" disabled type="text" :value="modeOptin"/>
						</view>
						<view :class="isModeOptions?'arrow1':'arrow'"></view>
					</view>
					<view class="options" v-if="isModeOptions">
						<view @click="getModeOption(item)" v-for="(item,index) in modeOptions" :key="index">
							{{item.text}}
						</view>
					</view>
				</view>
				<view class="">
					日期
				</view>
			</view>
		<!-- 订单列表 -->	
			<view class="orderList">
				<view class="orderItem" v-for="(item,index) in orderList" :key="index">
					<view class="orderCode">
						维修单号：<text>{{ item.id }}</text>
						<text :class="{
							'status-pending': item.status === '已预约',
							'status-processing': item.status === '进行中',
							'status-completed': item.status === '已完成',
							'status-cancelled': item.status === '已取消'
						}">{{ item.status }}</text>
					</view>
					<view>
						<view>
							维修方式：<text>{{ item.mode }}</text>
						</view>
						<view>
							预约日期：<text>{{ item.date }}</text>
						</view>
						<view class="btn" @click="goToDetail(item.id)">
							<button>查看详情</button>
						</view>
					</view>
				</view>
				<!-- 加载状态提示 -->
				<view class="load-more" v-if="orderList.length > 0">
					<text v-if="loading">加载中...</text>
					<text v-else-if="finished">没有更多了</text>
				</view>
				<!-- 空状态提示 -->
				<view class="empty-tip" v-if="!loading && orderList.length === 0">
					<text>暂无维修任务</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusOption: '全部',
				modeOptin: '全部',
				isStatusOptions: false,
				isModeOptions: false,
				statusOptions: [
					{
						value: '',
						text: '全部'
					},
					{
						value: '0',
						text: '已预约'
					},
					{
						value: '1',
						text: '进行中'
					},
					{
						value: '2',
						text: '已完成'
					},
					{
						value: '3',
						text: '已取消'
					}
				],
				modeOptions: [
					{
						value: '',
						text: '全部'
					},
					{
						value: '0',
						text: '到店维修'
					},
					{
						value: '1',
						text: '上门取车'
					}
				],
				orderList: [],
				shop: null,
				searchText: '',
				pageNum: 1,
				pageSize: 10,
				total: 0,
				loading: false,
				finished: false
			}
		},
		onLoad() {
			// 获取店铺信息
			this.shop = uni.getStorageSync('shop');
			console.log('当前店铺信息:', this.shop);
			
			if (!this.shop) {
				uni.reLaunch({
					url: '/pages/login/login'
				});
				return;
			}
			
			// 加载维修预约数据
			this.loadOrders();
		},
		methods: {
			// 加载维修预约数据
			loadOrders(isRefresh = false) {
				if (this.loading || (!isRefresh && this.finished)) return;
				
				this.loading = true;
				
				if (isRefresh) {
					this.pageNum = 1;
					this.orderList = [];
					this.finished = false;
				}
				
				uni.showLoading({
					title: '加载中...'
				});
				
				this.$request({
					url: 'shop/reservation/reservation/list',
					method: 'GET',
					data: {
						mid: this.shop.id,
						status: this.statusOption === '全部' ? '' : this.getStatusValue(),
						type: this.modeOptin === '全部' ? '' : this.getModeValue(),
						searchValue: this.searchText,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					},
					success: (res) => {
						if (res.data && res.data.rows) {
							const newOrders = res.data.rows.map(item => ({
								id: item.id,
								mode: item.type === '0' ? '到店维修' : '上门取车',
								date: item.reservationTime,
								status: this.getStatusText(item.status)
							}));
							
							this.orderList = [...this.orderList, ...newOrders];
							this.total = res.data.total;
							
							if (this.orderList.length >= this.total) {
								this.finished = true;
							} else {
								this.pageNum++;
							}
						}
					},
					fail: () => {
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
						this.loading = false;
					}
				});
			},
			
			// 触底加载更多
			onReachBottom() {
				if (!this.finished) {
					this.loadOrders();
				}
			},
			
			// 获取状态值
			getStatusValue() {
				const option = this.statusOptions.find(item => item.text === this.statusOption);
				return option ? option.value : '';
			},
			
			// 获取维修方式值
			getModeValue() {
				const option = this.modeOptions.find(item => item.text === this.modeOptin);
				return option ? option.value : '';
			},
			
			// 获取状态文本
			getStatusText(status) {
				switch(status) {
					case '0':
						return '已预约';
					case '1':
						return '进行中';
					case '2':
						return '已完成';
					case '3':
						return '已取消';
					default:
						return '未知状态';
				}
			},
			
			// 打开状态select选择框
			openStatusOptions(){
				this.isStatusOptions = !this.isStatusOptions;
			},
			// 获取状态option
			getStatusOption(item){
				this.statusOption = item.text;
				this.isStatusOptions = false;
				this.loadOrders(true);
			},
			// 打开维修方式select选择框
			openModeOptions(){
				this.isModeOptions = !this.isModeOptions;
			},
			// 获取维修方式option
			getModeOption(item){
				this.modeOptin = item.text;
				this.isModeOptions = false;
				this.loadOrders(true);
			},
			// 跳转到详情页
			goToDetail(id) {
				uni.navigateTo({
					url: `/packagesMy/maintenanceDetails/maintenanceDetails?id=${id}`
				});
			}
		}
	}
</script>

<style>
	page{
			background-color: #f0f0f0;
			padding: 0 20rpx;
		}
	.background {
		width: 750rpx;
		height: 280rpx;
		background-color: #2979ff;
		margin-left: -20rpx;
	}
	.body{
		position: absolute;
		top: 20rpx;
	}
	.title {
		position: relative;
	}
	.title > .input{
		background-color: white;
		width: 590rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		padding-left: 36rpx;
		padding-right: 80rpx;
		font-size: 30rpx;
	}
	.title > .search {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 34rpx;
	}
// 标签区域样式	
	.tag{
		color: white;
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}
	.tag > view {
		text-align: center;
		font-size: 32rpx;
		position: relative;
	}
	
	.select{
		background-color: rgba(0,0,0,0.2);
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		position: relative;
		width: 130rpx;
		margin-top: 10rpx;
	}
	.select .selectItem{
		color: white;
		font-size: 24rpx;
		width: 90rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.select > .arrow {
		border-right: 2rpx solid white;
		border-bottom: 2rpx solid white;
		width: 16rpx;
		height: 16rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-76%) rotate(45deg);
		right: 30rpx;
	}
	.select > .arrow1 {
		border-right: 2rpx solid white;
		border-bottom: 2rpx solid white;
		width: 16rpx;
		height: 16rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-26%) rotate(-135deg);
		right: 30rpx;
	}
// 弹出框区域样式	
	.options{
		background-color: white;
		width: 140rpx;
		padding: 10rpx 10rpx;
		box-shadow: 2rpx 2rpx 10rpx 2rpx rgba(220,220,220,0.8);
		border-radius: 10rpx;
		color: black;
		margin-top: 10rpx;
		position: absolute;
		z-index: 3;
		left: 50%;
		transform: translateX(-50%);
	}
	.options > view{
		text-align: center;
	}
// 订单列表区域样式
	.orderItem{
		width: 670rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
		padding-bottom: 10rpx;
		margin-top: 20rpx;
	}
	.orderItem > view:nth-child(2){
		position: relative;
	}
	.orderItem > view:nth-child(2) > view{
		margin: 10rpx 0;
	}
	.btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 10rpx;

	}
	.btn > button {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		background-color: #2979ff;
		color: white;
		border-radius: 40rpx;
	}
	.orderItem > .orderCode{
		font-size: 32rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-bottom: 6rpx solid #f0f0f0;
		position: relative;
		color: black;
	}
	.orderCode > text:nth-child(2) {
		font-size: 26rpx;
		position: absolute;
		right: 10rpx;
	}
	.load-more {
		text-align: center;
		padding: 20rpx 0;
		color: #999;
		font-size: 24rpx;
	}
	.empty-tip {
		text-align: center;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999;
	}
	.status-pending { color: #E6A23C; }    /* 已预约-橙色 */
	.status-processing { color: #2979ff; }  /* 进行中-蓝色 */
	.status-completed { color: #67C23A; }   /* 已完成-绿色 */
	.status-cancelled { color: #F56C6C; }   /* 已取消-红色 */
</style>
